/**
 * Created by Administrator on 2017/9/8.
 */
define(function (require) {

    function execute() {

        var $ = require('jquery');
        require('jquery.cookie');

        var leftTitleDom = document.getElementById("left-title");
        var leftContentDom = document.getElementById("left-content");

        leftTitleDom.innerHTML = '<li class="active">所有课程</li><li>我的课程</li>';
        leftContentDom.innerHTML =
            '<li class="active"><ul class="stu-list"></ul></li>' +
            '<li><ul class="stu-list"></ul></li>';


        var allCourseTitleLi = leftTitleDom.querySelectorAll("li")[0],
            myCourseTitleLi = leftTitleDom.querySelectorAll("li")[1],
            allCourseContentLi = leftContentDom.querySelectorAll("li")[0],
            myCourseContentLi = leftContentDom.querySelectorAll("li")[1],
            allCourseList = allCourseContentLi.querySelector(".stu-list"),
            myCourseList = myCourseContentLi.querySelector(".stu-list");

        var studentHandler = new require("userHandler").StudentHandler();

        var courseDatum = {}

        // click事件
        allCourseTitleLi.addEventListener("click", function () {
            myCourseContentLi.classList.remove("active");
            myCourseTitleLi.classList.remove("active");
            allCourseTitleLi.classList.add("active");
            allCourseContentLi.classList.add("active");
        });
        myCourseTitleLi.addEventListener("click", function () {
            myCourseTitleLi.classList.add("active");
            myCourseContentLi.classList.add("active");
            allCourseTitleLi.classList.remove("active");
            allCourseContentLi.classList.remove("active");
        });


        updateAllCourseList();

        function updateAllCourseList() {

            // 获取所有课程
            studentHandler.searchAllCourse(function (data) {
                for (var i in data) {
                    (function (data) {
                        // courseDatum
                        if (!courseDatum[data.id]) {
                            courseDatum[data.id] = {};
                            courseDatum[data.id].info = data;
                            courseDatum[data.id].hasJoined = false;
                        }

                    }(data[i]));

                }
                updateMyCourseList();
            });
        }

        function updateMyCourseList() {

            // 获取已经参加的课程
            studentHandler.getAllCourse(function (data) {

                for (var i in data) {
                    (function (data) {
                        // courseDatum
                        if (!courseDatum[data.id]) {
                            courseDatum[data.id] = {};
                            courseDatum[data.id].info = data;
                        }
                        courseDatum[data.id].hasJoined = true;
                    }(data[i]))
                }

                createDom();

            });

        }

        function createDom() {
            for (var i in courseDatum) {
                (function (i) {


                    var data = courseDatum[i].info;
                    var node, fnDiv;
                    node = document.createElement("LI");
                    node.innerHTML = data.name;
                    console.log(data)

                    fnDiv = document.createElement("DIV");
                    fnDiv.classList.add(courseDatum[i].hasJoined ? 'fn-remove' : 'fn-add');
                    node.appendChild(fnDiv);

                    allCourseList.appendChild(node);
                    courseDatum[i].dom = node;

                    node.addEventListener("click", function () {
                        $.cookie('courseId', data.id);
                        location.reload();
                    })


                    fnDiv.addEventListener("click", function (id) {
                        return function () {
                            handleFn.call(this, id);
                        }
                    }(data.id));


                    if (courseDatum[i].hasJoined) {

                        node = document.createElement("LI");
                        node.innerHTML = data.name;

                        var fnDiv = document.createElement("DIV");
                        fnDiv.classList.add('fn-remove');
                        node.appendChild(fnDiv);

                        myCourseList.appendChild(node);
                        courseDatum[i].dom2 = node;


                        node.addEventListener("click", function () {
                            $.cookie('courseId', data.id);
                            location.reload();
                        })
                        fnDiv.addEventListener("click", function (id) {
                            return function (e) {
                                e.stopPropagation();
                                handleFn.call(this, id);
                            }
                        }(data.id));
                    }

                }(i))


            }
        }

        function handleFn(id) {
            if (this.classList.contains('fn-remove')) {
                // 删除
                studentHandler.quitCourse(id, function () {
                    var fnDiv = courseDatum[id].dom.querySelector('.fn-remove');
                    fnDiv.classList.remove('fn-remove');
                    fnDiv.classList.add("fn-add");

                    courseDatum[id].hasJoined = false;
                    myCourseList.removeChild(courseDatum[id].dom2);
                    courseDatum[id].dom2 = undefined;
                });
            } else if (this.classList.contains('fn-add')) {

                studentHandler.joinCourse(id, function () {
                    var fnDiv = courseDatum[id].dom.querySelector('.fn-add');
                    fnDiv.classList.remove('fn-add');
                    fnDiv.classList.add("fn-remove");

                    var node = document.createElement("LI");
                    var data = courseDatum[id].info;
                    node.innerHTML = data.name;

                    fnDiv = document.createElement("DIV");
                    fnDiv.classList.add('fn-remove');
                    node.appendChild(fnDiv);

                    myCourseList.appendChild(node);
                    courseDatum[id].dom2 = node;


                    fnDiv.addEventListener("click", function (id) {
                        return function () {


                            handleFn.call(this, id);
                        }
                    }(data.id));

                })
            }
        }

    }


    return {
        execute: execute
    }
})